<template>
  <div class="mine-container">
    <div class="header-section">
      <div class="bg-wrap">
        <div class="head-img">
          <div>
            <img :src="info.avatar ? info.avatar : defaultAvatar" alt="">
            <div @click="goInfo">
              <img src="../assets/pencil.svg" alt="">
            </div>
          </div>
          <div>{{ info.nickName }}</div>
          <div></div>
        </div>

        <div class="operate-list">
          <div @click="handleorderList">
            <img src="../assets/mine/video.png" alt="">
            <span>电影票</span>
          </div>
          <div @click="handleExchangeOrderList">
            <img src="../assets/mine/order.png" alt="">
            <span>兑换订单</span>
          </div>
          <div @click="handleCard">
            <img src="../assets/mine/card.png" alt="">
            <span>卡券</span>
          </div>
          <div @click="bindCards">
            <img src="../assets/mine/bindcard.png" alt="">
            <span>绑卡</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content-section">
      <div class="content-section-list">
        <div @click="goconfiguration(1)">
          <span>关于我们</span>
        </div>
        <div @click="goconfiguration(2)">
          <span>隐私协议</span>
        </div>
      </div>
      <div @click="handleCall" class="phones">
        <span>客服电话： {{ phone }}</span>
      </div>
    </div>


    <van-dialog :show-cancel-button="true" :before-close="beforeClose" @confirm="confirmData" @cancel="cancelData"
      v-model="show" title="卡券信息">
      <van-field v-model="paramsData.cardNo" placeholder="请输入卡号" class="message" />
      <van-field type="password" v-model="paramsData.cardPwd" placeholder="请输入卡密" class="message" />
    </van-dialog>
  </div>
</template>
<script>
import { Toast } from 'vant';
import plantAPI from "@/api/plant";
export default {
  data() {
    return {
      defaultAvatar: require('../assets/head.png'),
      info: {},
      show: false,
      phone: '',
      paramsData: { cardNo: '', cardPwd: '' },
      hasTokens: ''
    }
  },
  created() {
    plantAPI.configurationInfo({
      categoryName: '影院电话'
    }).then(res => {
      this.phone = res.data.configuration
    })


    plantAPI.getUsers().then(res => {
      this.info = res.data
    })
  },
  methods: {
    beforeClose(action, done) {
      if (action === 'confirm') {
        // 如果点击的是确定按钮，检查表单
        if (!this.paramsData.cardNo || !this.paramsData.cardPwd) {
          Toast("卡号和卡密不能为空！")
          done(false); // 阻止关闭
          return;
        }
      }
      done(); // 允许关闭
    },
    cancelData() {
      this.resetData()
      this.show = false
    },
    resetData() {
      this.paramsData = {
        cardNo: '', cardPwd: ''
      }
    },
    confirmData() {
      if (!this.paramsData.cardNo || !this.paramsData.cardPwd) {
        this.show = true;
        Toast("请先填写卡号和卡密")
        return;
      }
      plantAPI.bindCard(this.paramsData).then(res => {
        Toast("绑定成功")
        this.show = false
      })
    },
    bindCards() {
      // this.resetData()
      // this.show = true
      this.$router.push({
        path: '/card-bind'
      })
    },
    goconfiguration(type) {
      if (type == 1) {
        this.$router.push({
          path: '/aboutMine'
        })
      } else {
        this.$router.push({
          path: '/policy'
        })
      }
    },
    handleCall() {
      window.location.href = `tel:${this.phone}`

    },
    goInfo() {
      this.$router.push({
        path: '/userInfo'
      })
    },
    handleExchangeOrderList() {
      this.$router.push({
        path: '/exchange-order'
      })
    },
    handleorderList() {
      this.$router.push({
        name: 'my-order'
      })
    },
    handleCard() {
      this.$router.push({
        name: 'cardCoupon'
      })
    },

  }

}
</script>
<style lang="scss" scoped>
.phones {
  position: fixed;
  bottom: 120px;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  padding: 8px 0;
  font-size: 16px;
  color: #6e6e6e;
  background: #ffffff;
  width: calc(100% - 32px);
  /* accounting for padding */
  max-width: 360px;
  /* matching other card elements */
  border-radius: 10px;
  // box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.message {
  .van-field {
    border: 1px solid #e2e2e2;
    width: 90%;
    margin: 28px auto !important;
    background: #f6f6f6;
  }
}

.mine-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .scrollWrap {
    width: 100%;
    height: 100%;
  }

  .header-section {
    width: 100%;
    height: 350px;
    position: relative;

    .bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .bg-wrap {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;

      .head-img {
        width: 100%;
        padding: 20px 0;
        background: linear-gradient(94deg,
            rgba(238, 71, 59, 0.05) 0%,
            rgba(246, 118, 109, 0.3) 58%,
            rgba(238, 71, 59, 0.3) 100%);
        color: #000;

        >div:nth-child(1) {
          width: 86px;
          height: 86px;
          position: relative;
          margin: auto;
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
          border-radius: 50%;
          border: 1px solid #ffffff;

          >img:nth-child(1) {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }

          >div {
            width: 20px;
            height: 20px;
            background-color: #ffffff;
            position: absolute;
            right: 6px;
            bottom: 0;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            >img {
              width: 15px;
              height: 15px;
            }
          }
        }

        >div:nth-child(2) {
          font-size: 18px;
          text-align: center;
          margin-top: 20px;
        }

        >div:last-child {
          width: 100%;
          margin-top: 16px;
          text-align: center;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
        }
      }

      .operate-list {
        margin-top: 20px;
        width: 100%;
        padding: 0 15px 0 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        >div {
          width: 164px;
          height: 56px;
          background: #ffffff;
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
          border-radius: 10px;
          padding: 0 39px 0 19px;
          box-sizing: border-box;
          display: flex;
          // justify-content: space-between;
          align-items: center;

          >img {
            width: 28px;
            height: 28px;
            margin-right: 15px;
          }

          >span {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
          }
        }

        >div:nth-child(1),
        >div:nth-child(2) {
          margin-bottom: 16px;
        }

        .contact {
          >button {
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            border: none;
            display: flex;
            // justify-content: space-between;
            align-items: center;
          }

          button:after {
            border: none;
          }

          img {
            width: 28px;
            height: 28px;
            margin-right: 15px;
          }

          span {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
          }
        }
      }
    }
  }

  .content-section {
    width: 100%;
    padding: 0 15px 0 16px;
    box-sizing: border-box;
    // margin-top: 45px;

    &-list {
      background: #ffffff;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 0 18px;
      box-sizing: border-box;

      >div {
        width: 100%;
        padding: 21px 0;
        display: flex;
        align-items: center;

        img {
          width: 18px;
          height: 18px;
        }

        span {
          font-weight: 400;
          font-size: 13px;
          color: #666666;
        }
      }

      >div:nth-child(2) {

        border-top: 1px solid #eeeeee;
        // border-bottom: 1px solid #eeeeee;
      }
    }
  }
}





//.container {
//  background: #F6F5F5;
//  min-height: calc(100vh - 95px);
//  /* 确保容器撑满整个视口 */
//  padding-bottom: 95px;
//
//  .head {
//    width: 100%;
//    height: 64px;
//    box-sizing: border-box;
//    background: linear-gradient(94deg, rgba(238, 71, 59, 0.05) 0%, #f6766d 58%, rgba(238, 71, 59, 0.3) 100%);
//    opacity: 0.38;
//    display: flex;
//    justify-content: space-between;
//
//    .left {
//      display: flex;
//      align-items: center;
//
//      .le {
//        width: 70px;
//        height: 70px;
//        border-radius: 50px;
//        border: 2px solid #FFFFFF;
//      }
//
//      .mid {
//        margin-left: 14px;
//        color: #000;
//
//        >div:nth-child(1) {
//          font-size: 16px;
//        }
//
//        .clickLogin {
//          display: flex;
//          align-items: center;
//
//        }
//      }
//    }
//
//    .right {
//      img {
//        width: 16px;
//        height: 16px;
//      }
//    }
//  }
//
//  .card {
//    width: 360px;
//    display: flex;
//    justify-content: space-between;
//    flex-wrap: wrap;
//    background: #fff;
//    padding-bottom: 20px;
//    margin: 20px auto 0;
//    border-radius: 10px;
//
//    >div {
//      width: 30%;
//      margin-top: 30px;
//
//      >div:nth-child(1) {
//        text-align: center;
//
//        img {
//          width: 30px;
//          height: 30px;
//        }
//      }
//
//      >div:nth-child(2) {
//        text-align: center;
//        color: #666;
//        font-size: 14px;
//      }
//    }
//
//  }
//}</style>
